<!-- Ring-map -->
<template>
  <div>
    <div ref="chart" class="position-center" :style="{ width: '150px', height: '150px' }"></div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, ref, watch } from 'vue'
  import * as echarts from 'echarts'
  import { getRingOption } from '@/utils/options'
  import { PieData } from '../utils/interface'
  import { formatValue } from '@/utils/common'

  interface Props {
    data: PieData[]
  }

  const chart = ref()
  const props = defineProps<Props>()

  const renderChart = () => {
    echarts.dispose(chart.value)
    const [all, used] = props.data.map((item) => item.value)
    let percent = formatValue((used / all) * 100, 0)
    if (Number.isNaN(percent)) {
      percent = 0
    }
    const option = getRingOption(props.data, percent + '%')
    const eChart = echarts.init(chart.value)
    eChart.setOption(option)
  }

  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )

  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })
</script>
<style lang="scss" scoped></style>
